module.exports = `
<!DOCTYPE html>
<html lang="">

<head><meta name="generator" content="Hexo 3.9.0">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

    
      <link rel="icon" href="https://wscats.github.io/omi-docs/public/favicon.ico">
    

    <title>
        
          Omil
        
    </title>

    <!-- Spectre.css framework (v0.5.8) -->
    <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">

    <!-- Noto Sans TC -->
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC" rel="stylesheet">

    <!-- theme css & js -->
    <link rel="stylesheet" href="https://wscats.github.io/omi-docs/public/css/spectre_custom.css">
    <link rel="stylesheet" href="https://wscats.github.io/omi-docs/public/css/book.css">
    <script src="https://wscats.github.io/omi-docs/public/js/book.js"></script>

    <!-- tocbot -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css">

    <!-- highlight.js -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    
    <!-- katex -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css">
</head>

<body style="background-color: transparent; color: white;">
<style>
.book-sidebar a {
    color: white;
}
.code {
    color: white;
}
</style>
<div class="container">
  <div class="book-container">
    <div class="columns">
      <div class="column col-2 hide-lg">
        <div class="book-sidebar">
  <h4 class="site-meta">
    <a style="color: white;" href="https://wscats.github.io/omi-docs/public/home">目录</a>
  </h4>
  <div class="sidebar-content">
    <!-- * [介绍](/)
* [安装](/install)
* [配合Omi Snippets插件](/plugin)
* [配合React开发](/react)
* [语言块规范](/spec)
* [JSX](/jsx)
* [Props](/props)
* [事件处理](/event)
* [生命周期](/lifecycle)
* [Update](/update)
* [Ref](/ref)
* [Store](/store)
* [CSS](/css)
* [高阶组件](/hoc) -->


<ul>
<li><a href="https://wscats.github.io/omi-docs/public/home">介绍</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/install/">安装</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/plugin">配合Omi Snippets插件</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/react">配合React开发</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/spec">语言块规范</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/jsx">JSX</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/props">Props</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/event">事件处理</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/lifecycle">生命周期</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/update">Update</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/ref">Ref</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/store">Store</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/css">CSS</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/hoc">高阶组件</a></li>
</ul>

  </div>
</div>

<script src="https://wscats.github.io/omi-docs/public/js/book-sidebar.js"></script>
      </div>

      <div class="column col-8 col-lg-12">
        <div class="book-content">
          <div class="book-navbar">
  <header class="navbar">
  <section class="navbar-section">
    <img class="navbar-icon" src="https://wscats.github.io/omi-docs/public/favicon.ico">
  </section>
  <section class="navbar-center">
    Omil
  </section>
  <section class="navbar-section">
    <label class="accordion-header c-hand" for="accordion-sidebar">
      <i class="icon icon-menu"></i>
    </label>
  </section>
</header>

<div class="accordion">
  <input type="checkbox" id="accordion-sidebar" name="accordion-checkbox" hidden>
  <div class="accordion-body">
    <!-- * [介绍](/)
* [安装](/install)
* [配合Omi Snippets插件](/plugin)
* [配合React开发](/react)
* [语言块规范](/spec)
* [JSX](/jsx)
* [Props](/props)
* [事件处理](/event)
* [生命周期](/lifecycle)
* [Update](/update)
* [Ref](/ref)
* [Store](/store)
* [CSS](/css)
* [高阶组件](/hoc) -->


<ul>
<li><a href="https://wscats.github.io/omi-docs/public/home">介绍</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/install/">安装</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/plugin">配合Omi Snippets插件</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/react">配合React开发</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/spec">语言块规范</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/jsx">JSX</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/props">Props</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/event">事件处理</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/lifecycle">生命周期</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/update">Update</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/ref">Ref</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/store">Store</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/css">CSS</a></li>
<li><a href="https://wscats.github.io/omi-docs/public/hoc">高阶组件</a></li>
</ul>

  </div>
</div>
</div>

<div class="book-post">
  <h1 id="Omil-是什么？"><a href="#Omil-是什么？" class="headerlink" title="Omil 是什么？"></a>Omil 是什么？</h1><p><code>omil</code>是一个 webpack 的 loader，它允许你以一种名为单文件组件<code>(SFCs)</code>的格式撰写 Omi 组件：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">lang</span>=<span class="string">"html"</span> <span class="attr">name</span>=<span class="string">"component-name"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">header</span> <span class="attr">onClick</span>=<span class="string">"$&#123;this.test&#125;"</span>&gt;</span>$&#123;this.data.title&#125;<span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line">export default class &#123;</span><br><span class="line">  test()&#123; console.log('Hello Eno!') &#125;</span><br><span class="line">  install() &#123;</span><br><span class="line">    this.data = &#123; title: 'Omi' &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line">header &#123; color: #58bc58; &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>Omil 还提供了很多酷炫的特性：</p>
<ul>
<li>允许为 Omi 组件的每个部分使用其它的 webpack loader，例如在<code>&lt;style&gt;</code>的部分使用 Sass 和在<code>&lt;template&gt;</code>的部分使用 jsx；</li>
<li>允许在一个 .omi 文件中使用自定义块，并对其运用自定义的 loader 链；</li>
<li>使用 webpack loader 将<code>&lt;style&gt;</code>和<code>&lt;template&gt;</code>中引用的资源当作模块依赖来处理；</li>
<li>在开发过程中使用热重载来保持状态。</li>
</ul>
<p>简而言之，webpack 和 Omi Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流，来帮助撰写 Omi.js 应用。</p>

</div>


  <div class="book-comments">
    


  </div>


<script src="https://wscats.github.io/omi-docs/public/js/book-post.js"></script>
        </div>
      </div>

      <div class="column col-2 hide-lg">
        <div class="book-toc">
  <div class="book-tocbot">
  </div>
  <div class="book-tocbot-menu">
    <a class="book-toc-expand" onclick="expand_toc()">Expand all</a>
    <a onclick="go_top()">Back to top</a>
    <a onclick="go_bottom()">Go to bottom</a>
  </div>
</div>

<script>
tocbot.init({
  tocSelector: '.book-tocbot',
  contentSelector: '.book-post',
  headingSelector: 'h1, h2, h3, h4, h5',
  collapseDepth: 2,
  orderedList: false,
  scrollSmooth: false,
});

function expand_toc(){
  var b = document.querySelector(".book-toc-expand");
  tocbot.init({
    tocSelector: '.book-tocbot',
    contentSelector: '.book-post',
    headingSelector: 'h1, h2, h3, h4, h5',
    collapseDepth: 6,
    orderedList: false,
    scrollSmooth: false,
  });
  b.setAttribute("onclick", "collapse_toc()");
  b.innerHTML = "Collapse all"
}

function collapse_toc(){
  var b = document.querySelector(".book-toc-expand");
  tocbot.init({
    tocSelector: '.book-tocbot',
    contentSelector: '.book-post',
    headingSelector: 'h1, h2, h3, h4, h5',
    collapseDepth: 2,
    orderedList: false,
    scrollSmooth: false,
  });
  b.setAttribute("onclick", "expand_toc()");
  b.innerHTML = "Expand all"
}

function go_top() {
  window.scrollTo(0, 0);
}

function go_bottom() {
  window.scrollTo(0, document.body.scrollHeight);
}

</script>
      </div>
    </div>
  </div>
</div>

</body>
</html>
`